import React, { useState } from 'react';
/*
  学习目标：hook中的useState函数
  步骤：
     1. 从react中导入useState钩子函数
     2. 调用useState去创建状态
     3. 解构，并使用useState的返值
    //  作用：useState是声状态的
    语法：const [声明的状态变量，更新变量的函数] = useSatte（初始值）
    与类组件对比
    声明的状态变量:等价于state.变量
    更新变量的函数：等价于this.setSatte(变量：XXXX)
    规范：set+驼峰命名,采用新值覆盖旧值方式，（调用的更改数据的哪个函数，里头的参数就是新值）

*/
export default function App() {
  const [count, setCount] = useState(12);
  const [text, setText] = useState('黄晓明很油腻~');
  console.log(5, count, setCount);
  const [list, setList] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9]);
  return (
    <>
      <h1>count-------{count}</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        count+1
      </button>
      <h5>{text}</h5>
      <button
        onClick={() => {
          setText(text + '~');
        }}
      >
        内容改变
      </button>
      <ul>
        {list.map(item => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
      <button
        onClick={() => {
          setList(() => {
            return list.map(item => {
              return item * 2;
            });
          });
        }}
      >
        更改数组的数据
      </button>
    </>
  );
}
